<template>

  <div class="app-container">
    <el-button type="primary" class="pan-btn blue-btn" @click="submitQuotaData">生成指标</el-button>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column width="120px" align="center" label="字段名称">
        <template slot-scope="{row}">
          <span>{{ row.columnName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" align="center" label="指标名称">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.name" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" align="center" label="指标简称">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.uname" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.uname }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="80px" align="center" label="指标描述">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.description" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.description }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="80px" align="center" label="指标类型">
        <template slot-scope="{row}">
          <el-select v-model="row.type" placeholder="请选择指标类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column min-width="80px" align="center" label="指标代码">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.code" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" align="center" label="指标标签">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input clearable v-model="row.lable" minlength="2" maxlength="10" size="small"/>
          </template>
          <span v-else>{{ row.lable }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="120">
        <template slot-scope="{row,$index}">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(row)"
          >
            完成
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="row.edit=!row.edit"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { saveQuota, queryQuotaType } from '@/api/quota/define/define.js'
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: 'pretreatmentDefine',
  //使用import引入外部组件需要在components对象中注册才可以使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      options: [],
      list: [],
      dimensionData: {
        dimension: []
      },
      submitList: []
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    confirmEdit(row) {
      row.edit = false
      this.dimensionAttr.centerDialogVisible = true
      //根据当前字段id查询维度id  此处展示勾选  保存指标
    },
    submitQuotaData() {
      this.list.forEach(item=>{
        console.log(item.dimensionList)
        if(item.edit){
          this.$message({
            message: '存在未编辑完成数据',
            type: 'warning'
          })
          return
        }
      })

      // saveQuota(this.list).then(res => {
      //   if (res.data) {
      //     this.msgSuccess('指标生成完成')
      //     this.$store.dispatch('tagsView/delView', this.$router.history.current)
      //     if (this.dimensionData.dimension.length > 0) {
      //       //this.$router.push({ name: 'pretreatmentDimension', params: this.dimensionData })
      //       this.$router.push({ path: '/quota/quotaDefine' })
      //     } else {
      //       this.$router.push({ path: '/quota/quotaDefine' })
      //     }
      //   }
      // })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
     queryQuotaType().then((res)=>{
      this.options = res.data
    })
    this.dimensionData.dimension = this.$route.params.dimension
    this.list = this.$route.params.quota.map(v => {
      this.$set(v, 'edit', true)
      this.$set(v, 'name', '请填写指标名称')
      this.$set(v, 'uname', '请填写指标简称')
      this.$set(v, 'description', '请填写指标描述')
      this.$set(v, 'type', 1)
      this.$set(v, 'createType', 1)
      this.$set(v, 'code', '请填写指标代码')
      this.$set(v, 'themeSetId', this.$route.params.themeId == undefined ? 132 : this.$route.params.themeId)
      this.$set(v, 'lable', '请填写指标标签')
      this.$set(v, 'colnameId', v.id)
      this.$set(v, 'sType', 1)
      return v
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeUnmount() {
  }, //生命周期 - 销毁之前
  unmounted() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

</style>
